<template>
  <section>
    <el-row>
      <el-col class="header" :span="21">
        <div class="title">
          <span>评测对象列表</span>
        </div>
        <div class="addGroup">
          <el-button type="text" class="addGroupButton" @click="addGroupDialog"
            >添加组</el-button
          >
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="21">
        <!-- 一级分类 -->
        <el-table :data="targetGroupList" stripe border style="width: 100%">
          <!-- <el-table-column type="index"></el-table-column> -->

          <el-table-column type="expand">
            <template v-slot="props">
              <!-- 二级分类 -->
              <el-table
                class="erjiTable"
                border
                :data="props.row.group"
                style="width: 80%"
              >
                <el-table-column type="index"></el-table-column>

                <el-table-column prop="name" label="名称/姓名">
                </el-table-column>
                <el-table-column label="操作">
                  <template v-slot="childScope">
                    <el-button
                      icon="el-icon-edit"
                      size="mini"
                      @click="updateTargetDialog(childScope.row)"
                    ></el-button>
                    <el-button
                      icon="el-icon-delete"
                      size="mini"
                      @click="deleteTarget(childScope.row.id)"
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="组别" prop="name"> </el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="addtargetDialog(scope.row)"
              ></el-button>
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="updateDialog(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="deleteGroup(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 添加组对话框 -->
    <el-dialog title="添加组" :visible.sync="addDialogVisible" width="30%">
      <el-input
        @keyup.enter.native="addGroup"
        placeholder="请输入组别名称"
        v-model="addGroupName.name"
        clearable
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addGroup">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改对话框 -->
    <el-dialog
      title="修改组名称"
      :visible.sync="updateDialogVisible"
      width="30%"
    >
      <el-input
        @keyup.enter.native="updateGroup"
        placeholder="请输入修改的组别名称"
        v-model="updateGroupData.name.name"
        clearable
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateGroup">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加二级分类对话框 -->
    <el-dialog
      title="添加部门/人员"
      :visible.sync="addtargetDialogVisible"
      width="30%"
    >
      <el-input
        @keyup.enter.native="addTarget"
        placeholder="请输入添加的名称"
        v-model="addTargetDate.name"
        clearable
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addtargetDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addTarget">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改二级分类对话框 -->
    <el-dialog
      title="修改部门/人员名称"
      :visible.sync="updateTargetDialogVisible"
      width="30%"
    >
      <el-input
        @keyup.enter.native="updateTarget"
        placeholder="请输入修改的部门/人员名称"
        v-model="updateTargetData.name"
        clearable
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateTargetDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateTarget">确 定</el-button>
      </span>
    </el-dialog>
  </section>
</template>
<script>
// 引入请求模块
import { $http } from "../../request/service";
export default {
  name: "",
  data() {
    return {
      // 修改二级分类对话框数据
      updateTargetData: {
        id: 0,
        name: "",
        groupId: 0
      },
      // 添加二级分类数据
      addTargetDate: {
        name: "",
        groupId: 0
      },
      // 修改组数据
      updateGroupData: {
        id: 0,
        name: {
          name: ""
        }
      },
      // 添加组数据
      addGroupName: { name: "" },
      // 控制添加组对话框的显示与隐藏
      addDialogVisible: false,
      // 控制修改组对话框的显示与隐藏
      updateDialogVisible: false,
      // 控制添加二级分类对话框的显示与隐藏
      addtargetDialogVisible: false,
      // 修改二级分类对话框显示
      updateTargetDialogVisible: false,
      // 所有组别列表
      targetGroupList: []
    };
  },
  components: {},
  created() {
    this.getTargetGroupList();
  },
  methods: {
    // 发送修改二级标题请求
    updateTarget() {
      if (this.updateTargetData.name !== "")
        return $http
          .put(`/target/${this.updateTargetData.id}`, this.updateTargetData)
          .then(res => {
            if (res.code !== 200) return this.$message.error(res.message);
            this.$message.success("修改成功");
            this.getTargetGroupList();
            this.updateTargetDialogVisible = false;
          });
      this.$message.info("请输入内容");
    },
    // 控制显示的修改对话框
    updateTargetDialog(obj) {
      this.updateTargetData.id = obj.id;
      this.updateTargetData.name = obj.name;
      this.updateTargetData.groupId = obj.groupId;
      this.updateTargetDialogVisible = true;
    },
    // 删除二级分类
    deleteTarget(id) {
      this.$confirm("此操作将永久删除该组以及组中的内容, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          $http.delete(`/target/${id}`).then(res => {
            if (res.code !== 200) return this.$message.error(res.message);
            this.$message.success("删除成功");
            this.getTargetGroupList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 发送添加二级分类请求
    addTarget() {
      if (this.addTargetDate.name !== "")
        return $http.post("/target", this.addTargetDate).then(res => {
          if (res.code !== 200) return this.$message.error(res.message);
          this.$message.success("添加成功");
          this.getTargetGroupList();
          this.addTargetDate.name = "";
          // this.addtargetDialogVisible = false;
        });
      this.$message.info("请输入内容");
    },
    // 添加二级分类对话框的显示
    addtargetDialog(obj) {
      this.addTargetDate.groupId = obj.id;
      this.addtargetDialogVisible = true;
    },
    // 修改组
    updateGroup() {
      if (this.updateGroupData.name.name !== "")
        return $http
          .put(
            `/target/group/${this.updateGroupData.id}`,
            this.updateGroupData.name
          )
          .then(res => {
            if (res.code !== 200) return this.$message.error(res.message);
            this.$message.success("修改成功");
            this.getTargetGroupList();
            this.updateDialogVisible = false;
          });

      this.$message.info("请输入内容");
    },
    // 修改组对话框的显示与隐藏
    updateDialog(obj) {
      this.updateGroupData.name.name = obj.name;
      this.updateGroupData.id = obj.id;
      this.updateDialogVisible = true;
    },
    // 删除组
    deleteGroup(id) {
      this.$confirm(
        "此操作将永久删除该组以及组中的所有内容, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          $http.delete(`/target/group/${id}`).then(res => {
            if (res.code !== 200) return this.$message.error(res.message);
            this.$message.success("删除成功");
            this.getTargetGroupList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 添加组
    addGroup() {
      if (this.addGroupName.name !== "")
        return $http.post("target/group", this.addGroupName).then(res => {
          if (res.code !== 200) return this.$message.error(res.message);
          this.$message.success(res.message);
          this.getTargetGroupList();
          this.addDialogVisible = false;
        });

      this.$message.info("请输入内容");
    },

    // 新增组对话框的显示
    addGroupDialog() {
      this.addDialogVisible = true;
    },
    // 获取组别及人员列表
    getTargetGroupList() {
      $http.get("/target/group").then(res => {
        console.log(res);
        this.targetGroupList = res.data;
      });
    }
  }
};
</script>
<style scoped>
.el-table__header {
  background-color: red !important;
}

.header {
  display: flex;
  align-content: center;
  justify-content: space-between;
}
.el-row {
  padding-top: 10px;
  display: flex;
  align-items: center;
}
.title {
  display: flex;
  align-items: center;
  text-align: start;
  font-size: 20px;
  font-weight: 700;
  height: 50px;
}
.searchWai {
  padding-left: 260px;
}
.erjiTable {
  margin: 0 auto;
}
.addGroup {
  display: flex;
}
.addGroup .el-button {
  font-size: 20px;
}
</style>
